<template>
  <view>
    <saerch class="search"></saerch>
    <view class="tabs">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        height="88"
        font-size="30"
        inactive-color="#676767"
        active-color="#EA4350"
        bar-width="184"
        bar-height="3"
        :bold="false"
      ></u-tabs>
    </view>
    <!-- <view v-if="current === 0"> -->
    <!--  综合 -->
    <view class="goods-content">
      <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        class="goods-item"
        v-for="item in goods"
        :key="item.goods_id"
      >
        <wiew class="goods-item-img">
          <u-image
            :src="item.goods_small_logo || src"
            width="191"
            height="191"
          ></u-image>
        </wiew>
        <view class="goods-item-info">
          <view class="goods_name">{{ item.goods_name }}</view>
          <view class="goods_price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <u-loadmore
      margin-bottom="10"
      margin-top="10"
      :status="status"
      icon-type="iconType"
      :load-text="loadText"
    />

    <!-- </view>
    <view v-if="current === 1"> -->
    <!--  销量 -->
    <!-- 销量销量销量销量 -->
    <!-- </view>
    <view v-if="current === 2"> -->
    <!--  价格 -->
    <!-- 价格价格价格价格
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      //商品列表
      goods: [],
      // 默认图片地址
      src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "实在没有了",
      },
      status: "loadmore",
    };
  },
  onLoad(options) {
    const { cid } = options;
    // 定义 接口要的参数
    this.params = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量
      pagesize: 20,
    };

    // 发送请求获取数据
    this.getGoodsList();
  },
  methods: {
    change(index) {
      this.current = index;
      // this.params.query = this.list[index].name;
      // this.goods = [];
      // this.params.pagenum = 1;
      // console.log(this.params);
      // this.getGoodsList();
    },
    async getGoodsList() {
      const res = await this.$u.http.get("/goods/search", this.params);
      this.goods = [...this.goods, ...res.goods];
      this.total = res.total;
    },
  },
  onReachBottom() {
    //   判断还有没有下一页数据
    if (this.goods.length < this.total) {
      this.status = "loading";
      this.params.pagenum++;
      this.getGoodsList();
    } else {
      uni.showToast({
        title: "没有下一页数据啦",
        icon: "none",
      });
      this.status = "nomer";
    }
  },
  async onPullDownRefresh() {
    this.goods = [];
    this.params.pagenum = 1;
    await this.getGoodsList();
    uni.stopPullDownRefresh();
    uni.showToast({
      title: "刷新成功",
      icon: "success",
    });
  },
};
</script>

<style lang="scss">
.search {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
}
.tabs {
  margin-top: 100rpx;
}
.goods-content {
  padding: 0 26rpx;
  .goods-item {
    height: 209rpx;
    display: flex;
    .goods-item-img {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .goods-item-info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin: 10rpx 0 10rpx 30rpx;
      color: #434343;
      .goods_name {
        font-size: 24rpx;
      }
      .goods_price {
        font-size: 24rpx;
        color: $theme-color;
      }
    }
  }
}
</style>